---
title: Product Cards
description: Product card components built with Tailwind CSS v4. These responsive, SEO-friendly cards are perfect for showcasing products in eCommerce stores, landing pages, and marketing sites. Easily customizable for any brand or catalog.
emoji: 🙋‍♀️
container: p-6 max-w-md mx-auto
terms:
  - product
  - card
  - ecommerce
components:
  - { title: 'Product with image, title and price' }
  - { title: 'Product with image, title, price and variant count' }
  - { title: 'Product with image, title, price and description' }
  - { title: 'Product with rounded image, title and price' }
  - { title: 'Product with image, title, price and variant options' }
  - { title: 'Product with image, title, price, tag, wishlist and call to action' }
  - { title: 'Collection with image, title and description' }
  - { title: 'Collection with image, title, description and call to action' }
  - { title: 'Collection with image, title, description, offer and call to action' }
  - { title: 'Product with image, title, price, wishlist and call to actions' }
---

# Product Card Components

<div class="max-w-prose text-pretty">
  These components were originally part of the eCommerce category but have since moved.
</div>

<p>{frontmatter.description}</p>

<CollectionList componentsData={componentsData} />
